<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <style>
        html,
        body,
        #map {
            height: 100%;
            width: 100%;
        }
    </style>
    <title>一个最简单的例子</title>
    <link rel="stylesheet" href="../library/ol/ol.css">
    <link rel="stylesheet" href="../css/common.css">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>

<body>
    <button id="start-animation">Start Animation</button>
    <div id="map" class="map"> </div>

    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL">
    </script>
    <script src="../library/ol/ol-debug.js"></script>
    <script src="./js/common.js"></script>
    <script type="text/javascript">
        // [10767225.552363068,3527110.2331911735] 
        var points = {
            "name": "pointsJson",
            "points": [{
                    "longitude": 10767225.552363068,
                    "latitude": 3527110.2331911735
                },
                {
                    "longitude": 12112517.25018217,
                    "latitude": 3541786.142621927
                },
                {
                    "longitude": 11672240.584467556,
                    "latitude": 4255979.826435385
                },
                {
                    "longitude": 11877702.699290108,
                    "latitude": 3463514.6256579068
                }
            ]
        }

        style = new ol.style.Style({
            image: new ol.style.Icon( /** @type {olx.style.IconOptions} */ ({
                // x周居中，y轴朝下
                anchor: [0.5, 1],
                src: './imgs/arrow2.png'
            }))
        })

        var layer = new ol.layer.Vector({
            source: new ol.source.Vector(),
            style: style
        });

        var startPoint = ol.proj.transform([104, 30], 'EPSG:4326', 'EPSG:3857')
        var map = new ol.Map({
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                }),
                layer
            ],
            target: 'map',
            view: new ol.View({
                center: startPoint,
                zoom: 6
            })
        });

        var geometry = new ol.geom.Point(startPoint)
        // 在地图上添加一个圆 setCoordinates
        var circle = new ol.Feature({
            geometry: geometry
        })
        layer.getSource().addFeature(circle);

        var f = layer.getSource().getFeatures()[0]
        // debugger;
        i = 0;
        setInterval(function() {
            if (i > 0) {
                j = i - 1;
            } else {
                j = points.points.length-1;
            }
            var oldPointX = points.points[j].longitude;
            var oldPointY = points.points[j].latitude;
            var newPointX = points.points[i].longitude;
            var newPointY = points.points[i].latitude;
            var dx = newPointX - oldPointX;
            var dy = newPointY - oldPointY;
            var rotation = Math.atan2(dy, dx);
            geometry.setCoordinates([newPointX, newPointY])
            style.setImage(new ol.style.Icon({
                anchor: [0.5, 1],
                // src: './imgs/location.png'
                src: './imgs/arrow2.png',
                rotateWithView: true,
                rotation: -rotation
            }))
            i++;
            if (i >= points.points.length) {
                i = 0;
            }
        }, 1000)

        // 添加一个用于选择Feature的交互方式
    </script>
</body>